<template>
  <div>
    <el-container>
      <el-header><Header></Header></el-header>
      <el-main>
        <div id="title">用户登录</div>
        <el-form ref="loginform"
        :model="loginform"
        :rules="rules"
        >

        <el-row type="flex" justify="center">
          <el-col :span="4">
            <el-form-item prop="username">
            <el-input v-model="loginform.username" prefix-icon="el-icon-user" autocomplete="off" placeholder="用户名" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="center">
          <el-col :span="4">
            <el-form-item prop="password">
              <el-input v-model="loginform.password" prefix-icon="el-icon-lock" autocomplete="off" show-password placeholder="密码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="center">
          <el-col :span="4">
            <el-form-item>
              <el-button 
              :loading="loading" 
              type="primary"
              @click="doLogin"
              round >立即登录</el-button>
            </el-form-item>
            <table>
              <tr>
                <td width="150px" style="text-align: left">
                  <el-switch
                      v-model="value"
                      active-color="#3A62D7"
                      inactive-color="#F5F5F5">
                  </el-switch>
                  <span style="color: #F5F5F5;font-size:16px" >记住密码</span>
                </td>
                <td width="150px" style="text-align: right">
                  <el-link type="primary" style="color:#F5F5F5;font-size:16px" @click="reset">忘记密码</el-link>
                </td>
              </tr>
              <tr>
                <td width="150px" style="text-align: left">
                  <router-link to="/register">
                    <el-link type="primary" style="color:#F5F5F5;font-size:16px" >创建账号</el-link>
                  </router-link>

                </td>
                <td width="150px" style="text-align: right">
                  <el-link type="primary" style="color:#F5F5F5;font-size:16px">其他帮助</el-link>
                </td>
              </tr>
            </table>
          </el-col>
        </el-row>

        </el-form>
      </el-main>
      <el-footer height="120px"><Footer></Footer></el-footer>
    </el-container>
  </div>
</template>

<script>

import JwtDecode from 'jwt-decode'
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import { mapMutations } from 'vuex';

export default {
  name: "login",
  components: {Footer, Header},
  data() {
    return {
      value: true,
      loginform: {
        username: "",
        password: ""
      },
      rules: {
        username: [{ required: true, message: '用户名不能为空', trigger: 'blur'}],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur'}]
      }
    }
  },
  methods: {
    ...mapMutations(['changeLogin']),
    ...mapMutations(['changUid']),
    ...mapMutations(['saveUMessage']),
    doLogin(){
      let fd = new FormData();
      fd.append("userName",this.loginform.username);
      fd.append("passwd",this.loginform.password);

      let config = {
        header: {
          'Content-Type': 'multipart/form=data'
        }
      }

      this.$axios.post("user/login",fd,config).then (res => {
        alert(res.data.msg)
        if (res.data.msg === "登录成功") {
          // this.$router.push({path:'/'})
          this.userToken = 'Bearer ' + res.data.data;
          this.userId = res.data.uid;
          const decoded = JwtDecode(res.data.data) 
          const userMessage = {
            uName:decoded.userName,
            email:decoded.email
          }        
          this.changeLogin({Authorization: this.userToken});
          this.changUid({Uid:this.userId});
         
          this.saveUMessage(userMessage);
          console.log('adtfy')
          this.$router.push({path: '/'})
          console.log(res.data)
          console.log(res.data.data)//res.data.data为令牌（token）
        }
      }).catch( res => {
      alert(res.data)
      })
    },
    // 忘记密码进入密码重置
    reset(){
      this.$router.push({path: '/reset'})
    }
  },
  // 进入注册页面
  register() {
    this.$router.push({path: "/register"})
  }
}
</script>

<style scoped>
.el-button {
  background: #3A62D7;
  border: #3A62D7;
  width: 100%;
  color: #F5F5F5;
}
.el-row {
  margin-top: 60px;
  margin-bottom: 20px;
}

#title {
  color: #F5F5F5;
  font-size: 30px;
  font-weight: bold;
  border: #333333;
  margin-top: 150px;
  margin-bottom: 20px;
}




.s2{    /*s2是我的输入框class*/
}
/deep/ .el-input__inner { /*或者 .s2>>>.el-input__inner  */
  border-radius: 20px; /*输入框圆角值*/
  background-color: rgba(255, 255, 255, 0.35);
  border: rgba(255, 255, 255, 0.35);
  color: #F5F5F5;

}
/deep/ .el-input__prefix {
 color: #F5F5F5;
}



.el-header{
  background-color: #F5F5F5;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-footer {
  background-color: #F5F5F5;
  color: #333;
  text-align: center;
  line-height: 3px;

}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 150px;
}

.el-main {
  background: url("../assets/bg.png") center center no-repeat;
  background-size: 100% 100%;
  /*background-color: #E9EEF3;*/
  color: #333;
  text-align: center;
  height: 800px;
  padding: unset;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>